import './Menu.scss'

import React from 'react'
import {connect} from 'react-redux'
import {getListData,itemClick} from'../actions/menuAction.js'
import MenuItem from './MenuItem/MenuItem.jsx'
import ShopBar from './ShopBar/ShopBar.jsx'
//点菜页面

class Menu extends React.Component {
  constructor(props) {
    super(props)
    this.props.dispatch(getListData())
  }
  
  //点击切换右边数据
  itemClick(index){
    this.props.dispatch(itemClick({
      currentLeftIndex:index
    }))
  }
  //渲染左边列表
  renderLeft(){
    let list = this.props.listData.food_spu_tags || []
    return list.map((item,index)=>{
      let LeftIndex = this.props.currentLeftIndex
      let cls = LeftIndex === index? 'left-item active':'left-item'
      return(
        <div className={cls} key={index} onClick={()=>this.itemClick(index)}>
          <div className='item-text'>{item.icon?<img className='item-icon' src={item.icon}/>: null}{item.name}</div>
        </div>
      )
    })
  }
  //
  renderRightList(array) {
    let _array = array || []
    return _array.map((item,index)=>{
      if (!item.chooseCount) {
        item.chooseCount = 0
      }
      return <MenuItem key={index} data={item} index={index}></MenuItem>
    })
  }
  
  //渲染右边列表
  renderRight(){
    let index = this.props.currentLeftIndex
    let array = this.props.listData.food_spu_tags || []
    let currentItem = array[index]
    if (currentItem){
      let title = <p key={1} className='right-title'>{currentItem.name}</p>
      return [
        title,
        <div key={2} className='right-list'>
          <div className='right-list-inner'>
            {this.renderRightList(currentItem.spus)}
          </div>
        </div>
      ]
    } else {
      return null
    }
  }
    render(){
      return (
        <div className='menu-inner'>
          <div className='left-bar'>
            <div className='left-bar-inner'>
              {this.renderLeft()}
            </div>
          </div>
          <div className='right-content'>
            {this.renderRight()}
          </div>
          <ShopBar/>
        </div>
      )
  }
}

export default connect(
  state=>({
     listData:state.menuReducer.listData,
    currentLeftIndex: state.menuReducer.currentLeftIndex
   
})

)(Menu)